<template>
    <div class="charts-container">
        <div class="charts-box">
            <div class="charts-header">
                <div class="charts-title">
                    <svg t="1646211913478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7362" width="15" height="15"><path fill="#FF5A5A" d="M512 34.247111l271.530667 271.530667a384 384 0 1 1-543.061334 0L512 34.247111z m0 120.661333L300.771556 366.136889a298.666667 298.666667 0 1 0 422.456888 0L512 154.908444z m-128 420.295112a128 128 0 0 0 255.715556 8.817777l0.284444-8.817777h85.333333a213.333333 213.333333 0 0 1-426.382222 11.377777l-0.284444-11.377777h85.333333z" p-id="7363"></path></svg>
                    流量分布
                </div>
                <div class="charts-search">
                    <el-select 
                        v-model="searchContent.channel" 
                        placeholder="请选择" 
                        size="small"
                        @change="handleChange">
                        <el-option
                            v-for="item in channelArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <el-radio-group 
                    class="charts-radio-group"
                    v-model="searchContent.data_type" 
                    @change="handleRadioChange"
                    size="small">
                    <el-radio-button
                        v-for="item in dataTypeArr"
                        :key="item.label"
                        :label="item.value">
                        {{item.label}}
                    </el-radio-button>
                </el-radio-group>
                <div class="charts-date-type">
                    <date-picker @getData="getData" :dateDataType="dateDataType" :date_interval="date_interval" size="small"></date-picker>
                </div>
            </div>
            <div class="charts-content">
                <charts-pie :dataArr="dataArr" :showParticleSize="showParticleSize" container="c1" :hasType="false"></charts-pie>
            </div>
        </div>
    </div>
</template>
<script>
import datePicker from '../datePicker.vue';
import chartsPie from '../data/charts-pie.vue';
export default {
    data() {
        return {
            channelArr: [
                {label: '全部', value: '全部'},
                {label: '集团首页', value: '集团首页'},
                {label: '经销商首页', value: '经销商首页'},
                {label: '个人中心', value: '个人中心'},
                {label: '分享', value: '分享'},
                {label: '微信公众号', value: '微信公众号'},
                {label: '买车选店', value: '买车选店'},
                {label: '车主生活', value: '车主生活'},
                {label: '即时通讯', value: '即时通讯'},
                {label: '其他来源', value: '其他来源'},
                // {label: '会员商城', value: '会员商城'},
                // {label: '新车团购', value: '新车团购'},
                // {label: '售后团购', value: '售后团购'},
                // {label: '订阅消息', value: '订阅消息'},
                // {label: '朋友圈', value: '朋友圈'},
            ],
            dataTypeArr: [
                {label: '次数', value: 'pv', valueSuffix: '次'},
                {label: '人数', value: 'uv', valueSuffix: '人'}
            ],
            showParticleSize: false,    // 粒度控件
            searchContent: {
                channel: '全部',     // 渠道
                data_type: 'pv',        // 类型
                begin_date: null,
                end_date: null
            },
            dataArr: {
                chart: {
                    backgroundColor: "none"
                },
                variablepie: {
                    dataLabels: {
                        distance: 60,
                        style: {
                            color: '#333333',
                            fontWeight: 'bold',
                            fontSize: '14px'
                        }
                    },
                    innerSize: '50%',
                    zMin: 50,
                    slicedOffset: 15
                },
                tooltip: {
                    enabled: true,
                },
                legend: {
                    itemStyle: {
                        color: '#333333',
                        fontWeight: 'bold',
                        fontSize: '14px'
                    },
                    itemHoverStyle: {
                        color: '#0C5EC2'
                    },
                    width: 150,
                    itemWidth: 150,
                    maxHeight: 560, // 图例最大高度，超过高度则显示分页项
                    itemDistance: 10,
			        itemMarginTop: 4,
			        itemMarginBottom: 4
                },
                showScale: true,
                series: []
            },
            dateDataType: null,
            dataObj: {},
            date_interval: [],
            admin_is_super: 0,
            admin_id: 0
        }
    },
    components: { datePicker, chartsPie },
    created() {
        this.admin_is_super = this.$store.getters["user_info"].admin_is_super
        this.admin_id = this.$store.getters["user_info"].admin_id
        this.dateInterval = this.$route.params.dateInterval;
    },
    methods: {
        handleChange() {
            this.getData()
        },
        handleRadioChange() {
            const nowType = this.dataTypeArr.find(item => item.value === this.searchContent.data_type)
            const dataObj = this.dataObj[nowType.value]
            const total = dataObj.reduce((sum, item) => {
                return sum + item.num;
            }, 0) || 0;
            if(total === 0) {
                dataObj.map(item => {
                    item.num = 0.001;
                    return item;
                })
            }
            const data = []
            // 排序
            dataObj.sort(this.compare("num", false))
            dataObj.forEach((item, index) => {
                data.push({name: item.business_type, y: item.num, z: 110 + 10 * index})
            })
            this.dataArr.valueSuffix = nowType.valueSuffix
            this.dataArr.tooltip.title = this.searchContent.channel + ` (${nowType.label})`
            this.dataArr.series = [{
                color: '#4293F4',
                data,
            }];
        },
        compare: (property, desc = false) => {
            return function (a, b) {
                const val1 = a[property]
                const val2 = b[property]
                if (desc) {
                    return val1 - val2 // 升序排列
                } else {
                    return val2 - val1 // 降序排列
                }
            }
        },
        getData(dateInterval = null) {

            // 请求参数
            let datas = { ...this.searchContent }
            if(this.dateInterval) {
                dateInterval = this.dateInterval;

                // 更新日期选中值 
                const  startDate = Date.parse(dateInterval[0]);
                const  endDate = Date.parse(dateInterval[1]);
                const diff_days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
                if(diff_days <= 7) {
                    this.dateDataType = "visit_date_7"
                } else if(diff_days <= 30) {
                    this.dateDataType = "visit_date_30"
                } else {
                    this.dateDataType = "visit_date_custom"
                }
                this.date_interval = dateInterval;
                this.dateInterval = null;
            }
            
            if(dateInterval) {
                datas.begin_date = dateInterval[0];
                datas.end_date = dateInterval[1];
                this.date_interval = dateInterval
                this.searchContent = { ...datas }
            }
            // if (datas.channel === '全部') datas.channel = ''

            // 数据请求
            this.$http.get('/admin/yt_car/index.php?act=statistic&op=flowDistribution', {params: datas})
            .then(res => {
                this.dataObj = res.data || {
                    pv: [{business_type: datas.channel, num: 0}],
                    uv: [{business_type: datas.channel, num: 0}]
                }
                this.handleRadioChange()
            })
            .catch(error => {
                this.$message.error(`${error}`)
            })
        }
    }
}
</script>
<style scoped lang="scss">
    @import url('~@/common/scss/charts-public.scss'); 
    .charts-container {
        box-shadow: none;
        // width: 100%;
        width: calc(100% + 10px);
        height: calc(100% - 29px);
        margin: 0 -5px;
        // overflow-y: auto;
        &.scroll {
            padding-right: 3px;
        }
    }
    .charts-search {
        left: 94px;
        margin: auto;
    }
    .charts-date-type { margin: 0 0 0 4px; }
    .charts-box {
        background: #fff;
        box-shadow: 0px 0px 10px #ddd;
        box-sizing: border-box;
        height: calc(100% - 30px);
        margin: 15px 5px;
        position: relative;
        .charts-more {
            top: 11px;
        }
        .charts-content {
            padding: 50px 20px;
            /deep/ .chart-content { padding-bottom: 10px;}
        }
    }
    .charts-radio-group /deep/ {
        flex-grow: 1;
        text-align: right;
        padding-right: 25px;
        .el-radio-button--small {
            min-width: 60px;
            input, .el-radio-button__inner { width: 100%; }
        }
    }
</style>